<!DOCTYPE html>
<html>

	<div id="app">

		<h1 style="color: #0f9ae0">宠物详细资料</h1>
		<h2>店铺</h2>
		<div>{{detailed.shop.name}}</div>
	</div>

	<!--引入vue和axios-->
	<script src="js/plugins/vue/dist/vue.js"></script>
	<script src="js/plugins/axios/dist/axios.js"></script>
	<!--全局使用axios-->
	<script src="js/common.js"></script>


	<script type="text/javascript">
		$(function() {});
		$(window).load(function() {
			$('.flexslider').flexslider({
				animation: "slide",
				start: function(slider) {
					$('body').removeClass('loading');
				}
			});
		});
	</script>

	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{

				detailed:{
					pet:{},
					shop:{},
					detail:{}
				},


			},
			methods: {
				PetDetails(id) {
					// 根据id查询店铺和详细信息
					this.$http.get("/pet/detailed/"+id).then(res => {
						this.detailed.shop = res.data.shop
						this.detailed.detail = res.data.detail
						this.detailed.pet = res.data
						// 判断是否有图片，如果没有图片就展示默认的图片
						if (res.data.resources){
							this.resources=res.data.resources.split(",")
						}else{
							this.resources="http://dfs.java.itsource.cn/group1/M00/00/10/oYYBAGKGaX6AcNKcAAKgrREaA_U82.jpeg,/group1/M00/00/10/oYYBAGKGaYGAJl7MAACYQzhivr478.jpeg,/group1/M00/00/10/oYYBAGKGaYOACgwpAABWLFOgueU05.jpeg"
						}
					})
				},
			},
			mounted() {
				// 截取路径上面的id
				let id = parseUrlParams2Obj(location.href).id
				// 调用查询方法
				this.PetDetails(id)
			}
		})
	</script>
</html>